<template>
  <div class="nav">
    <div class="nav-item">
      <div class="wangji-job">
        <RouterLink to="/my"><span><</span></RouterLink>
        <div  class=" bg-black">全部订单</div>
        <span class="dd"></span>
      </div>
    </div>
    <div class="danghangye">
      <van-tabs>
        <van-tab title="全部订单">
            <div class="dingdan-item">
                <div>订单编号：2018016001</div>
                <div>卖家已发货</div>
            </div>
            <div class="dingdan-job">
                <div><img src="../../assets/images/22.png" alt=""></div>
                <div class="dingdan-jobb">
                    <div>直发 ecostore/ecostore 椰子香草沐浴露400m</div>
                    <div>共1件产品  合计：￥108</div>
                </div>
            </div>
            <div class="danhao">
                <div>顺丰快递</div>
                <div>单号：KFNM111111</div>
                <div>确认收货</div>
            </div>
            <div class="dingdan-item">
                <div>订单编号：2018016001</div>
                <div>等待买家付款</div>
            </div>
            <div class="dingdan-job">
                <div><img src="../../assets/images/22.png" alt=""></div>
                <div class="dingdan-jobb">
                    <div>直发 ecostore/ecostore 椰子香草沐浴露400m</div>
                    <div>共1件产品  合计：￥108</div>
                </div>
            </div>
            <div class="a">
                <div>取消订单</div>
                <div>去付款</div>
            </div>
            <div class="dingdan-item">
                <div>订单编号：2018016001</div>
                <div>等待卖家发货</div>
            </div>
            <div class="dingdan-job">
                <div><img src="../../assets/images/22.png" alt=""></div>
                <div class="dingdan-jobb">
                    <div>直发 ecostore/ecostore 椰子香草沐浴露400m</div>
                    <div>共1件产品  合计：￥108</div>
                </div>
            </div>
            <div class="b">
                <div class="bb"></div>
                <div>取消订单</div>
            </div>
            <div class="dingdan-item">
                <div>订单编号：2018016001</div>
                <div>交易成功</div>
            </div>
            <div class="dingdan-job">
                <div><img src="../../assets/images/22.png" alt=""></div>
                <div class="dingdan-jobb">
                    <div>直发 ecostore/ecostore 椰子香草沐浴露400m</div>
                    <div>共1件产品  合计：￥108</div>
                </div>
            </div>
            <div class="bb">
                <div class="bbb"></div>
                <div>去评价</div>
            </div>
        </van-tab>
        <van-tab title="待付款">
            <div class="dingdan-item">
                <div>订单编号：2018016001</div>
                <div>等待买家付款</div>
            </div>
            <div class="dingdan-job">
                <div><img src="../../assets/images/22.png" alt=""></div>
                <div class="dingdan-jobb">
                    <div>直发 ecostore/ecostore 椰子香草沐浴露400m</div>
                    <div>共1件产品  合计：￥108</div>
                </div>
            </div>
            <div class="a">
                <div>取消订单</div>
                <div>去付款</div>
            </div>
            <div class="dingdan-item">
                <div>订单编号：2018016001</div>
                <div>等待买家付款</div>
            </div>
            <div class="dingdan-job">
                <div><img src="../../assets/images/22.png" alt=""></div>
                <div class="dingdan-jobb">
                    <div>直发 ecostore/ecostore 椰子香草沐浴露400m</div>
                    <div>共1件产品  合计：￥108</div>
                </div>
            </div>
            <div class="a">
                <div>取消订单</div>
                <div>去付款</div>
            </div>
        </van-tab>
        <van-tab title="待发货">
            <div class="dingdan-item">
                <div>订单编号：2018016001</div>
                <div>等待卖家发货</div>
            </div>
            <div class="dingdan-job">
                <div><img src="../../assets/images/22.png" alt=""></div>
                <div class="dingdan-jobb">
                    <div>直发 ecostore/ecostore 椰子香草沐浴露400m</div>
                    <div>共1件产品  合计：￥108</div>
                </div>
            </div>
            <div class="b">
                <div class="bb"></div>
                <div>取消订单</div>
            </div>
            <div class="dingdan-item">
                <div>订单编号：2018016001</div>
                <div>等待卖家发货</div>
            </div>
            <div class="dingdan-job">
                <div><img src="../../assets/images/22.png" alt=""></div>
                <div class="dingdan-jobb">
                    <div>直发 ecostore/ecostore 椰子香草沐浴露400m</div>
                    <div>共1件产品  合计：￥108</div>
                </div>
            </div>
            <div class="b">
                <div class="bb"></div>
                <div>取消订单</div>
            </div>
        </van-tab>
        <van-tab title="待收货">
            <div class="dingdan-item">
                <div>订单编号：2018016001</div>
                <div>卖家已发货</div>
            </div>
            <div class="dingdan-job">
                <div><img src="../../assets/images/22.png" alt=""></div>
                <div class="dingdan-jobb">
                    <div>直发 ecostore/ecostore 椰子香草沐浴露400m</div>
                    <div>共1件产品  合计：￥108</div>
                </div>
            </div>
            <div class="danhao">
                <div>顺丰快递</div>
                <div>单号：KFNM111111</div>
                <div>确认收货</div>
            </div>
            <div class="dingdan-item">
                <div>订单编号：2018016001</div>
                <div>卖家已发货</div>
            </div>
            <div class="dingdan-job">
                <div><img src="../../assets/images/22.png" alt=""></div>
                <div class="dingdan-jobb">
                    <div>直发 ecostore/ecostore 椰子香草沐浴露400m</div>
                    <div>共1件产品  合计：￥108</div>
                </div>
            </div>
            <div class="danhao">
                <div>顺丰快递</div>
                <div>单号：KFNM111111</div>
                <div class="danhao-job">确认收货</div>
            </div>
        </van-tab>
        <van-tab title="待评价">
            <div class="dingdan-item">
                <div>订单编号：2018016001</div>
                <div>交易成功</div>
            </div>
            <div class="dingdan-job">
                <div><img src="../../assets/images/22.png" alt=""></div>
                <div class="dingdan-jobb">
                    <div>直发 ecostore/ecostore 椰子香草沐浴露400m</div>
                    <div>共1件产品  合计：￥108</div>
                </div>
            </div>
            <div class="bb">
                <div class="bbb"></div>
                <div><RouterLink to="/pingjiaView">去评价</RouterLink></div>
            </div>
            <div class="dingdan-item">
                <div>订单编号：2018016001</div>
                <div>交易成功</div>
            </div>
            <div class="dingdan-job">
                <div><img src="../../assets/images/22.png" alt=""></div>
                <div class="dingdan-jobb">
                    <div>直发 ecostore/ecostore 椰子香草沐浴露400m</div>
                    <div>共1件产品  合计：￥108</div>
                </div>
            </div>
            <div class="bb">
                <div class="bbb"></div>
                <div><RouterLink to="/pingjiaView">去评价</RouterLink></div>
            </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<style scoped>
.wangji-job {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}
.wangji-job div {
  color: #09b674;
}
.nav-item span {
  padding: 5px 0;
}
.dingdan-item{
    display: flex;
    justify-content: space-between;
    padding: 15px;
    border-bottom: 1px solid #f4f4f4;
}
.dingdan-item div:nth-child(1){
    color: #666262;
}
.dingdan-item div:nth-child(2) {
    color: #09b674;
}
.dingdan-job {
    display: flex;
    border-bottom: 1px solid #f4f4f4;
}
.dingdan-jobb{
    margin-top: 20px;
}
.dingdan-jobb div:nth-child(1){
    font-size: 14px;
}
.dingdan-jobb div:nth-child(2){
    margin-left: 90px;
    padding: 5px 0;
    color: #a1a1a1;
}
.danhao {
    display: flex;
    justify-content: space-between;
    padding: 5px 20px;
    color: #666262;
    height: 30px;
}
.danhao div:nth-child(2){
    margin-right: 20px;
}
.danhao div:nth-child(3){
    color: #09b674;
    border: 1px solid #09b674;
    border-radius: 15px;
    padding: 10px;
    font-size: 14px;
    height: 25px;
    line-height: 5px;
}
.a {
    display: flex;
    justify-content: flex-end;
    padding: 5px 20px;
    height: 30px;
    line-height: 25px;
    font-size: 14px;
}
.a div {
    padding: 0 10px;
    margin-left: 5px;
}
.a div:nth-child(1){
    border: 1px solid #a1a1a1;
    border-radius: 15px;
    /* padding: 5px; */
    color: #a1a1a1;
    height: 25px;
}
.a div:nth-child(2){
    border: 1px solid #09b674;
    border-radius: 15px;
    /* padding: 5px; */
    color: #09b674;
    height: 25px;
}
.b {
  display: flex;
  justify-content: space-between;
  /* padding: 10px; */
  height: 30px;
  font-size: 14px;
}
.b div {
  color: #a1a1a1;
}
.b div:nth-child(2) {
  padding: 5px 5px;
  border: 1px solid #a1a1a1;
  border-radius: 15px;
  margin-right: 5px;
  margin-top: 5px;
  height: 25px;
  line-height: 15px;
}
.bb {
  display: flex;
  justify-content: space-between;
  /* padding: 10px; */
  height: 30px;
  font-size: 14px;
}
.bb div {
  color: #09b674;
}
.bb div:nth-child(2) {
  padding: 10px;
  border: 1px solid #09b674;
  border-radius: 15px;
  margin-right: 5px;
  margin-top: 4px;
  height: 25px;
  line-height: 5px;
}
</style>
